import {
  Button,
  Form,
  Card,
  Input,
  Select,
  message,
  Cascader
} from "antd";
const { Option } = Select;
import React, { Component } from "react";
import "./index.scss";
import Link from "umi/link";
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { connect } from "dva";
const { Meta } = Card;
@connect(
  state => ({
    
	}),{
    addSubject:(payload,callback)=>({
      type:'add/addSubject',
      payload,
      callback
		})
  }
)
class AddSubjectForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ckeditor:'',
      options:[
        {
          value:1,
          label:'前端',
          children:[
            {
              value:1,
              label:'html',
            },
            {
              value:2,
              label:'css',
            },
            {
              value:3,
              label:'javascript',
            },
            {
              value:4,
              label:'ajax',
            },
            {
              value:5,
              label:'http',
            }
          ]
        }
      ],
      optionDefaultValue:[1,1]
    };
  }
  componentDidMount(){
    console.log(11)
    // this.props.addSubject();
    
  }
  componentWillReceiveProps(props) {
 
  }

  handleSubmit = e => {
    e.preventDefault();
    let that = this;
    this.props.form.validateFields((err, values) => {
      console.log(values)
      if (!err) {
        if(!this.state.ckeditor){
          message.error('请输入您的答案！');
          return;
        }
        values.ckeditor = this.state.ckeditor;
        values.category = values.mainType[0];
        values.sub_category = values.mainType[1];
        this.props.addSubject(values,function(){
          message.success('添加成功',function(){
            that.props.form.resetFields(['title'])
            that.state.editor.setData('');
          })
        });
      }
    });
  }
  onOptionsChange=value=>{
    console.log(value)
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="add-container">
        <h1 className="title">添加题目</h1>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item>
            {getFieldDecorator('mainType', {
              rules: [
                {
                  type: 'array',
                  required: true,
                  message: '请选择类型',
                }
              ]
            })(
              <Cascader options={this.state.options} onChange={value=>this.onOptionsChange(value)} placeholder="请选择类型"/>
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('title', {
              rules: [
                {
                  required: true,
                  message: '请输入您的标题',
                },
              ]
            })(
              <Input placeholder="请输入标题"
              />,
            )}
          </Form.Item>
          <div>
          <CKEditor
              editor={ ClassicEditor }
              // data={this.state.defaultCkeditor}
              onInit={ editor => {
                  // You can store the "editor" and use when it is needed.
                  console.log( 'Editor is ready to use!', editor );
                  this.setState({
                    editor
                  })
              } }
              onChange={ ( event, editor ) => {
                  const data = editor.getData();
                  console.log( { event, editor, data } );
                  this.setState({
                    ckeditor:data
                  })
              } }
              onBlur={ ( event, editor ) => {
                  console.log( 'Blur.', editor );
              } }
              onFocus={ ( event, editor ) => {
                  console.log( 'Focus.', editor );
              } }
            />
          </div>
          <Form.Item className="mt20">
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
        
        <div></div>
      </div>
    );
  }
}
const AddSubjectNormalForm = Form.create({ name: 'add_subject' })(AddSubjectForm);
export default AddSubjectNormalForm;
